<template>
  <div style="min-height: 100vh;display: flex;
  flex-direction: column;">
  <el-scrollbar style="position: relative;">
    <div class="scrollbar-flex-content">
      <ul>
        <template v-for="item in data.data?.articleCats" :key="item">
          <li class="cate1" :class="{highlighted:checked[item.id]}"  @click="onChange(item.id)">{{ item?.catName }}</li>
        </template>
      </ul>
      <el-icon class="fixed-icon">
        <Grid @click="dialogFormVisible=true"/>
      </el-icon>
    </div>
    <el-dialog width="95%" v-model="dialogFormVisible">
      <template v-for="item in data.data?.articleCats" :key="item">
          <el-check-tag style="margin: 3px; " :checked="!checked[item.id]" @click="onChange(item.id)">
            {{ item?.catName }}
          </el-check-tag>
      </template>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="onChange();dialogFormVisible = false">重置</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          关闭
        </el-button>
      </span>
      </template>
    </el-dialog>
  </el-scrollbar>
  <czr-list-articles ref="child"></czr-list-articles>
  <czr-footer-main/>
  </div>
</template>
<script setup>
import {articleCatAll} from "@/http/article";
import {ref, onMounted} from "vue";
import {Grid} from '@element-plus/icons-vue'
import CzrListArticles from "@/components/czr-list-articles.vue";
import CzrFooterMain from "@/components/czr-footer-main.vue";
import {useUserToken} from "@/store/counter";
const userToken=useUserToken();
let dialogFormVisible = ref(false)
const data = ref({});
const checked = ref([])
const child = ref(null) //获取子组件
let tagState = ref()
onMounted(async () => {
  await loadData();

})
const onChange = (index) => {
  if (tagState) {
    checked.value[tagState] = !checked.value[tagState]
  }
  checked.value[index] = !checked.value[index]
  tagState = index;
  updateDate(index);
}

async function loadData() {
  await articleCatAll().then(res => {
    data.value = res;
    userToken.setAllCatsList(res.data.articleCats)
    console.log(userToken.getAllCatsList)
  }).catch(err => {
    console.log("err---", err)
  })
}

function updateDate(cateId) {
  if (child.value) {
    child.value.updateDate(cateId);
  }
}

</script>
<style scoped>
.scrollbar-flex-content {
  display: flex;
}

.fixed-icon {
  padding-block-start: 0.2em;
  padding-inline-end: 0.1em;
  position: fixed;
  right: 1px;
  font-size: 30px;
  padding-left: 6px;
  background-color: #FFFFFF;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.cate1 {
  padding-right: 0.7em;
  font-size: 1rem;
  color: #8f8fa6;
  height: 1.173333rem;
  margin-right: .533333rem;
  line-height: 1.173333rem;
  white-space: nowrap;
}

ul {
  padding-inline-start: 1em;
  list-style-type: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 0.8rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.highlighted{
  font-size: 1.25em;
  color: black;
}
</style>


